<script lang="ts" setup>
import { computed } from 'vue';
import { OrderStatus, RefundStatus } from '@/constants/orders';
import { useLocale } from '@/locale/locale';

const props = withDefaults(
  defineProps<{
    orderStatus?: string;
    orderNo?: string;
    createdAt?: string;
    totalAmount?: number;
    balanceAmount?: number;
    couponAmount?: number;
    actualAmount?: number;
    refundStatus?: string;
    cancellationFee?: number;
    refundAmount?: number;
    days?: number;
  }>(),
  {
    refundStatus: RefundStatus.WAIT,
    refundAmount: 0,
    cancellationFee: 0
  }
);

const { t } = useLocale();
</script>

<template>
  <apt-section>
    <!-- 订单编号 -->
    <view class="mb-4 flex items-center">
      <view class="order-details__other-label">
        {{ t('LRKey_orderNo') }}
      </view>
      <view class="order-details__other-value">
        <view class="mr-2 text-base text-primary">{{ orderNo }}</view>
        <apt-copy-text-button :text="orderNo"></apt-copy-text-button>
      </view>
    </view>
    <!-- 下单时间 -->
    <view class="mb-4 flex items-center">
      <view class="order-details__other-label">
        {{ t('LOKey_orderTime') }}
      </view>
      <view class="order-details__other-value">
        <view class="text-base text-primary">{{ createdAt }}</view>
      </view>
    </view>
    <!-- 订单总额 -->
    <view class="mb-4 flex items-center">
      <view class="order-details__other-label">
        {{ t('LRKey_orderTotalMoney') }}
      </view>
      <view class="order-details__other-value">
        <view class="text-base text-primary">{{ `¥${totalAmount}JPY` }}</view>
      </view>
    </view>
    <!-- 房费 -->
    <view class="mb-4 flex items-center">
      <view class="order-details__other-label">
        {{ t('LRKey_roomFeeXNight', { night: days }) }}
      </view>
      <view class="order-details__other-value">
        <view class="text-base text-primary">{{ t('LPKey_moneyX', { money: totalAmount }) }}</view>
      </view>
    </view>
    <!-- 优惠券 -->
    <view class="mb-4 flex items-center">
      <view class="order-details__other-label">
        {{ t('LRKey_coupon') }}
      </view>
      <view class="order-details__other-value">
        <view class="text-base text-red">{{ `-¥${couponAmount}JPY` }}</view>
      </view>
    </view>
    <!-- 积分抵扣 -->
    <view class="mb-4 flex items-center">
      <view class="order-details__other-label">
        {{ t('LRKey_scoreRedemption') }}
      </view>
      <view class="order-details__other-value">
        <view class="text-base text-red">{{ `-¥${balanceAmount}JPY` }}</view>
      </view>
    </view>
    <!-- 应付金额 -->
    <view class="mb-4 flex items-center">
      <view v-if="orderStatus === OrderStatus.WAIT_PAY" class="order-details__other-label">
        {{ t('LHTKey_onlyShouldPay') }}
      </view>
      <view v-else class="order-details__other-label">
        {{ t('LOKey_orderAmountPay') }}
      </view>
      <view class="order-details__other-value">
        <view class="text-base text-primary">{{ `¥${actualAmount}JPY` }}</view>
      </view>
    </view>
    <!-- 退款 -->
    <template v-if="refundStatus !== RefundStatus.WAIT">
      <!-- 取消费用 -->
      <view class="mb-4 flex items-center">
        <view class="order-details__other-label">
          {{ t('LOKey_orderCancelFee') }}
        </view>
        <view class="order-details__other-value">
          <view class="text-base text-red">{{ `-¥${cancellationFee}JPY` }}</view>
        </view>
      </view>
      <!-- 退款金额 -->
      <view class="flex items-center">
        <view class="order-details__other-label">
          {{ t('LOKey_orderRefundAmount') }}
        </view>
        <view class="order-details__other-value">
          <view class="text-base text-primary">{{ `¥${refundAmount}JPY` }}</view>
        </view>
      </view>
    </template>
  </apt-section>
</template>

<style>
.order-details__other-label {
  width: 140rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #adaeb0;
}

.order-details__other-value {
  display: flex;
  align-items: center;
  flex: 1;
  margin-left: 100rpx;
}
</style>
